<template>
	<view class="container">
		<view class="status-bar"></view>
		<view class="form-group">
			<view class="form-rows">
				<view class="form-row">
					<view class="left">联系人</view>
					<input type="text" placeholder="请输入联系人" placeholder-class="input-placeholder" class="form-row-input" v-model="form.contacts_name" />
				</view>
				<view class="form-row">
					<view class="left">联系电话</view>
					<input type="text" 
					placeholder="请输入联系电话" 
					placeholder-class="input-placeholder" 
					class="form-row-input" 
					v-model="form.contacts_mobile" />
				</view>
				<view class="form-row">
					<view class="left">店铺名称</view>
					<input type="text" 
					placeholder="请输入店铺名称" 
					placeholder-class="input-placeholder" 
					class="form-row-input" 
					v-model="form.store_name" />
				</view>
				<view class="form-row">
					<view class="left">所在地区</view>
					<view class="form-row-flex" @click="chooseLocation">
						<view class="form-row-text" v-if="form.province!='' && form.city!='' && form.district!=''">{{form.province+' '+form.city+' '+form.district}}</view>
						<view class="form-row-center" v-else>请选择所在城市</view>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/sh-dizhi.png" mode="widthFix" class="right-icon"></image>
					</view>
				</view>
				<view class="form-row form-row-textarea">
					<view class="left">详细地址</view>
					<u-textarea 
					padding="0"
					border="none"
					class="form-row-textarea"
					placeholderClass="input-placeholder"
					v-model="form.store_address" 
					placeholder="请输入详细地址"></u-textarea>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/sh-dizhi.png" mode="widthFix" class="right-icon"></image>
				</view>
			</view>
		</view>
		<view class="form-group">
			<view class="title">上传店铺门头照片</view>
			<view class="upload-rows">
				<view class="upload-row" @click="uploadFilePromise('store_logo')">
					<image :src="form.store_logo!=''?form.store_logo:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/upload-img.png'" mode="widthFix" class="upload-img"></image>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="fixed-btns">
			<button class="fixed-btn" @click="tijiao" :disabled="btnDisabled">{{edit_text}}</button>
		</view>
	</view>
</template>

<script>
	import md5 from '@/components/MD5.js'
	import {
		baseUrl
	} from '@/config/config.js'
	
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		data() {
			return {
				store:'',
				edit:1,
				edit_text:'提交申请',
				form:{
					step:1,
					contacts_name:'',
					contacts_mobile:'',
					store_name:'',
					province:'',
					city:'',
					district:'',
					store_address:'',
					longitude:'',
					latitude:'',
					store_logo:'',
				}
			};
		},
		computed:{
			btnDisabled(){
				if(_this.edit==-100 || _this.edit==-1){
					return false
				}
				return true
			}
		},
		methods: {
			chooseLocation(){
				if(_this.btnDisabled){
					return
				}
				uni.chooseLocation({
					success: function (res) {
						console.log(res);
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						_this.form.latitude=res.latitude
						_this.form.longitude=res.longitude
						_this.form.store_address=res.address
						_this.getRegeo(res)
					}
				});
			},
			getRegeo(res){
				let key=getApp().globalData.gd_web_key
				let location=`${res.longitude},${res.latitude}`
				// var url=`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${location}`
				uni.request({
					url:'https://restapi.amap.com/v3/geocode/regeo',
					method:'GET',
					data:{
						key,
						location,
					},
					success(res) {
						let {addressComponent}=res.data.regeocode
						_this.form.province=addressComponent.province
						_this.form.city=addressComponent.city
						_this.form.district=addressComponent.district
						console.log(res);
						console.log("省份:"+addressComponent.province);
						console.log("城市:"+addressComponent.city);
						console.log("区县:"+addressComponent.district);
						console.log("乡镇/街道:"+addressComponent.township);
					},
					fail(fail) {
						console.log(fail);
					}
				})
			},
			tijiao(){
				_this.form.step=2
				_this.ztd_apply()
			},
			async ztd_apply(){
				if(_this.form.step==2){
					var rule = [{
						name: 'contacts_name',
						rules: ['require'],
						errorMsg: {
							require: '请输入联系人',
						}
					},  {
						name: 'contacts_mobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请输入联系电话',
							mobile: '请输入正确的联系电话',
						}
					}, {
						name: 'store_name',
						rules: ['require'],
						errorMsg: {
							require: '请输入店铺名称',
						}
					}, {
						name: 'district',
						rules: ['require'],
						errorMsg: {
							require: '请选择所在地区',
						}
					}, {
						name: 'store_address',
						rules: ['require'],
						errorMsg: {
							require: '请输入详细地址',
						}
					}, {
						name: 'longitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择经度',
						}
					}, {
						name: 'longitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择经度',
						}
					}, {
						name: 'latitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择纬度',
						}
					},  {
						name: 'store_logo',
						rules: ['require'],
						errorMsg: {
							require: '请上传店铺门头照片',
						}
					}];
					// 是否全部通过，返回Boolean
					let checked = validate.check(_this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
				}
				const data = await _this.$post('api/ztd_sq',_this.form)
				if (data.code == 200) {
					_this.$u.toast(data.msg)
					_this.form.step=1
					_this.ztd_apply()
				} else if (data.code == 10) {
					_this.edit=data.data.edit
					_this.edit_text=data.data.edit_text
					_this.store=data.data.store
					if(_this.store){
						_this.form.contacts_name=_this.store.contacts_name
						_this.form.contacts_mobile=_this.store.contacts_mobile
						_this.form.store_name=_this.store.store_name
						_this.form.province=_this.store.province
						_this.form.city=_this.store.city
						_this.form.district=_this.store.district
						_this.form.store_address=_this.store.store_address
						_this.form.longitude=_this.store.longitude
						_this.form.latitude=_this.store.latitude
						_this.form.store_logo=_this.store.store_logo
					}
				} else {
					_this.$u.toast(data.msg)
				}
			},
			uploadFilePromise(path) {
				if(_this.btnDisabled){
					return
				}
				let sign_prefix=getApp().globalData.sign_prefix
				let sign=md5.hax_md5('path'+path+'user_id'+this.user_id+ sign_prefix + this.user_token + sign_prefix).toLocaleLowerCase()
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						uni.uploadFile({
							url: baseUrl+'/api/UploadPic', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header:{
								token:_this.user_token
							},
							formData: {
								user_id: _this.user_id,
								path,
								sign: sign
							},
							success: (result) => {
								let data=JSON.parse(result.data)
								if(data.code==200){
									_this.form[path]=data.data.img
								}else{
									uni.$u.toast(data.msg)
								}
							}
						});
					}
				});
			}
		},
		onLoad(e) {
			_this = this;
			_this.ztd_apply()
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/form.scss";
	.container {
		position: relative;
		padding-top: calc(44px + 20rpx);
		height: 100%;
		background: url('https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/user-bg.png') left top/100% 400rpx no-repeat;
		box-sizing: border-box;
	}
</style>
